<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>商品</title>
		<link rel="stylesheet" type="text/css" href="css/商品大模块.css" />
		<link rel="stylesheet" type="text/css" href="css/商品小li.css" />
		<link rel="stylesheet" type="text/css" href="css/浏览更多.css" />
		<link rel="stylesheet" type="text/css" href="css/base_transform.css" />
		<link rel="stylesheet" href="css/shopping_tag.css">

	</head>
	<body>
		<div class="box_shopping_box">
			<div class="boxd_main">
				<div class="bjb">
					<div class="bjb_box clearfix">
						<div class="bjb_title">
							笔记本
						</div>
						<div class="more">
							<ul class="tab_list clearfix">
								<li class="tab_active tab_list_li">666</li>
								<li class=" tab_list_li">777</li>
								<li class=" tab_list_li">888</li>
							</ul>
						</div>
					</div>
				</div>
			</div>

			<!-- 两个元素的块 begin-->
			<div class="boxd_hd_main">
				<!-- 两个元素的块 左边-->
				<div class="boxd_hd_main_left_2 clearfix">
					<ul class="main_left_ul_2 ">
						<li class="main_left_li_2">
							<a href="#" class="main_left_img_a_2 clearfix">
								<img class="main_left_img_2" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3d47879ec183e25a36e67e0219636e60.jpg?thumb=1&w=234&h=300&f=webp&q=90">
							</a>
						</li>
						<li class="main_left_li_2">
							<a href="#" class="main_left_img_a_2 clearfix">
								<img class="main_left_img_2" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3d47879ec183e25a36e67e0219636e60.jpg?thumb=1&w=234&h=300&f=webp&q=90">
							</a>
						</li>
					</ul>
				</div>
				<!-- 两个元素的块 右边-->
				<div class="boxd_hd_main_right ">
					<div class="main_right_box clearfix">
						<ul class="main_right_box_ul  clearfix">
							<li class="box_right_li">
								<a href="#" class="box_right_a clearfix">
									<img class="box_right_a_img" src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png?thumb=1&w=200&h=200&f=webp&q=90"
									 alt="">
									<div class="box_right_a_deta">
										<h3 class="box_right_atitle">title</h3>
										<p class="box_right_content">box_right_content</p>
										<p class="box_right_price">
											<span class="box_right_new_price">1999</span><span class="box_right_old_price">2999</span>
										</p>
									</div>
								</a>
							</li>


							<!-- 商品 小个的 -->
							<li class=" main_right_li_items">
								<a href="#" class="main_right_li_items_a clearfix">
									<div class="items_left">
										<h3 class="items_title">Redmi显示器23.8英寸</h3>
										<p class="item_price">
											<span class="normal_price">599</span>
										</p>
									</div>
									<div class="items_right">
										<img class="items_right_img" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7c37478d8b3b553ba0a50adaec2fc775.png?thumb=1&w=125&h=125&f=webp&q=90">
									</div>
								</a>
							</li>
							<!-- 浏览更多 单页ul 看情况 添加一个 -->
							<li class=" main_right_li_items_bottom">
								<a href="#" class="main_right_li_items_bottom_a clearfix">
									<div class="items_left_bottom">
										<h3 class="items_title_bottom">浏览更多</h3>
										<p class="item_content_bottom">热门</p>
									</div>
									<div class="items_right_bottom">
										<img class="items_right_img_bottom" src="../images/arrowright.svg">
									</div>
								</a>
							</li>
						</ul>
						<ul class="main_right_box_ul  clearfix">
							<li class="box_right_li">
								<a href="#" class="box_right_a clearfix">
									<img class="box_right_a_img" src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png?thumb=1&w=200&h=200&f=webp&q=90"
									 alt="">
									<div class="box_right_a_deta">
										<h3 class="box_right_atitle">title</h3>
										<p class="box_right_content">box_right_content</p>
										<p class="box_right_price">
											<span class="box_right_new_price">1999</span><span class="box_right_old_price">2999</span>
										</p>
									</div>
								</a>
							</li>
							<li class="box_right_li">
								<a href="#" class="box_right_a clearfix">
									<img class="box_right_a_img" src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png?thumb=1&w=200&h=200&f=webp&q=90"
									 alt="">
									<div class="box_right_a_deta">
										<h3 class="box_right_atitle">title</h3>
										<p class="box_right_content">box_right_content</p>
										<p class="box_right_price">
											<span class="box_right_new_price">1999</span><span class="box_right_old_price">2999</span>
										</p>
									</div>
								</a>
							</li>
							<li class="box_right_li">
								<a href="#" class="box_right_a clearfix">
									<img class="box_right_a_img" src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png?thumb=1&w=200&h=200&f=webp&q=90"
									 alt="">
									<div class="box_right_a_deta">
										<h3 class="box_right_atitle">title</h3>
										<p class="box_right_content">box_right_content</p>
										<p class="box_right_price">
											<span class="box_right_new_price">1999</span><span class="box_right_old_price">2999</span>
										</p>
									</div>
								</a>
							</li>
							<li class="box_right_li">
								<a href="#" class="box_right_a clearfix">
									<img class="box_right_a_img" src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png?thumb=1&w=200&h=200&f=webp&q=90"
									 alt="">
									<div class="box_right_a_deta">
										<h3 class="box_right_atitle">title</h3>
										<p class="box_right_content">box_right_content</p>
										<p class="box_right_price">
											<span class="box_right_new_price">1999</span><span class="box_right_old_price">2999</span>
										</p>
									</div>
								</a>
							</li>
							<li class="box_right_li">
								<a href="#" class="box_right_a clearfix">
									<img class="box_right_a_img" src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png?thumb=1&w=200&h=200&f=webp&q=90"
									 alt="">
									<div class="box_right_a_deta">
										<h3 class="box_right_atitle">title</h3>
										<p class="box_right_content">box_right_content</p>
										<p class="box_right_price">
											<span class="box_right_new_price">1999</span><span class="box_right_old_price">2999</span>
										</p>
									</div>
								</a>
							</li>
							<li class="box_right_li">
								<a href="#" class="box_right_a clearfix">
									<img class="box_right_a_img" src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png?thumb=1&w=200&h=200&f=webp&q=90"
									 alt="">
									<div class="box_right_a_deta">
										<h3 class="box_right_atitle">title</h3>
										<p class="box_right_content">box_right_content</p>
										<p class="box_right_price">
											<span class="box_right_new_price">1999</span><span class="box_right_old_price">2999</span>
										</p>
									</div>
								</a>
							</li>
							<li class="box_right_li">
								<a href="#" class="box_right_a clearfix">
									<img class="box_right_a_img" src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png?thumb=1&w=200&h=200&f=webp&q=90"
									 alt="">
									<div class="box_right_a_deta">
										<h3 class="box_right_atitle">title</h3>
										<p class="box_right_content">box_right_content</p>
										<p class="box_right_price">
											<span class="box_right_new_price">1999</span><span class="box_right_old_price">2999</span>
										</p>
									</div>
								</a>
							</li>

							<!-- 商品 小个的 -->
							<li class=" main_right_li_items">
								<a href="#" class="main_right_li_items_a clearfix">
									<div class="items_left">
										<h3 class="items_title">Redmi显示器23.8英寸</h3>
										<p class="item_price">
											<span class="normal_price">599</span>
										</p>
									</div>
									<div class="items_right">
										<img class="items_right_img" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7c37478d8b3b553ba0a50adaec2fc775.png?thumb=1&w=125&h=125&f=webp&q=90">
									</div>
								</a>
							</li>
							<!-- 浏览更多 单页ul 看情况 添加一个 -->
							<li class=" main_right_li_items_bottom">
								<a href="#" class="main_right_li_items_bottom_a clearfix">
									<div class="items_left_bottom">
										<h3 class="items_title_bottom">浏览更多</h3>
										<p class="item_content_bottom">热门</p>
									</div>
									<div class="items_right_bottom">
										<img class="items_right_img_bottom" src="../images/arrowright.svg">
									</div>
								</a>
							</li>
						</ul>
					</div>
				</div>
				<!-- 右边结束 -->

			</div>
			<!-- 两个元素的块 end-->
		</div>
		
		
		<div class="box_shopping_box">
			<div class="boxd_main">
				<div class="bjb">
					<div class="bjb_box clearfix">
						<div class="bjb_title">
							笔记本
						</div>
						<div class="more">
							<ul class="tab_list clearfix">
								<li class="tab_active tab_list_li">666</li>
								<li class=" tab_list_li">777</li>
								<li class=" tab_list_li">888</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		
			<!-- 两个元素的块 begin-->
			<div class="boxd_hd_main">
				<!-- 两个元素的块 左边-->
				<div class="boxd_hd_main_left_2 clearfix">
					<ul class="main_left_ul_2 ">
						<li class="main_left_li_2">
							<a href="#" class="main_left_img_a_2 clearfix">
								<img class="main_left_img_2" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3d47879ec183e25a36e67e0219636e60.jpg?thumb=1&w=234&h=300&f=webp&q=90">
							</a>
						</li>
						<li class="main_left_li_2">
							<a href="#" class="main_left_img_a_2 clearfix">
								<img class="main_left_img_2" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3d47879ec183e25a36e67e0219636e60.jpg?thumb=1&w=234&h=300&f=webp&q=90">
							</a>
						</li>
					</ul>
				</div>
				<!-- 两个元素的块 右边-->
				<div class="boxd_hd_main_right ">
					<div class="main_right_box clearfix">
						<ul class="main_right_box_ul  clearfix">
							<li class="box_right_li">
								<a href="#" class="box_right_a clearfix">
									<img class="box_right_a_img" src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png?thumb=1&w=200&h=200&f=webp&q=90"
									 alt="">
									<div class="box_right_a_deta">
										<h3 class="box_right_atitle">title</h3>
										<p class="box_right_content">box_right_content</p>
										<p class="box_right_price">
											<span class="box_right_new_price">1999</span><span class="box_right_old_price">2999</span>
										</p>
									</div>
								</a>
							</li>
		
		
							<!-- 商品 小个的 -->
							<li class=" main_right_li_items">
								<a href="#" class="main_right_li_items_a clearfix">
									<div class="items_left">
										<h3 class="items_title">Redmi显示器23.8英寸</h3>
										<p class="item_price">
											<span class="normal_price">599</span>
										</p>
									</div>
									<div class="items_right">
										<img class="items_right_img" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7c37478d8b3b553ba0a50adaec2fc775.png?thumb=1&w=125&h=125&f=webp&q=90">
									</div>
								</a>
							</li>
							<!-- 浏览更多 单页ul 看情况 添加一个 -->
							<li class=" main_right_li_items_bottom">
								<a href="#" class="main_right_li_items_bottom_a clearfix">
									<div class="items_left_bottom">
										<h3 class="items_title_bottom">浏览更多</h3>
										<p class="item_content_bottom">热门</p>
									</div>
									<div class="items_right_bottom">
										<img class="items_right_img_bottom" src="../images/arrowright.svg">
									</div>
								</a>
							</li>
						</ul>
						<ul class="main_right_box_ul  clearfix">
							<li class="box_right_li">
								<a href="#" class="box_right_a clearfix">
									<img class="box_right_a_img" src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png?thumb=1&w=200&h=200&f=webp&q=90"
									 alt="">
									<div class="box_right_a_deta">
										<h3 class="box_right_atitle">title</h3>
										<p class="box_right_content">box_right_content</p>
										<p class="box_right_price">
											<span class="box_right_new_price">1999</span><span class="box_right_old_price">2999</span>
										</p>
									</div>
								</a>
							</li>
							<li class="box_right_li">
								<a href="#" class="box_right_a clearfix">
									<img class="box_right_a_img" src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png?thumb=1&w=200&h=200&f=webp&q=90"
									 alt="">
									<div class="box_right_a_deta">
										<h3 class="box_right_atitle">title</h3>
										<p class="box_right_content">box_right_content</p>
										<p class="box_right_price">
											<span class="box_right_new_price">1999</span><span class="box_right_old_price">2999</span>
										</p>
									</div>
								</a>
							</li>
							<li class="box_right_li">
								<a href="#" class="box_right_a clearfix">
									<img class="box_right_a_img" src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png?thumb=1&w=200&h=200&f=webp&q=90"
									 alt="">
									<div class="box_right_a_deta">
										<h3 class="box_right_atitle">title</h3>
										<p class="box_right_content">box_right_content</p>
										<p class="box_right_price">
											<span class="box_right_new_price">1999</span><span class="box_right_old_price">2999</span>
										</p>
									</div>
								</a>
							</li>
							<li class="box_right_li">
								<a href="#" class="box_right_a clearfix">
									<img class="box_right_a_img" src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png?thumb=1&w=200&h=200&f=webp&q=90"
									 alt="">
									<div class="box_right_a_deta">
										<h3 class="box_right_atitle">title</h3>
										<p class="box_right_content">box_right_content</p>
										<p class="box_right_price">
											<span class="box_right_new_price">1999</span><span class="box_right_old_price">2999</span>
										</p>
									</div>
								</a>
							</li>
							<li class="box_right_li">
								<a href="#" class="box_right_a clearfix">
									<img class="box_right_a_img" src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png?thumb=1&w=200&h=200&f=webp&q=90"
									 alt="">
									<div class="box_right_a_deta">
										<h3 class="box_right_atitle">title</h3>
										<p class="box_right_content">box_right_content</p>
										<p class="box_right_price">
											<span class="box_right_new_price">1999</span><span class="box_right_old_price">2999</span>
										</p>
									</div>
								</a>
							</li>
							<li class="box_right_li">
								<a href="#" class="box_right_a clearfix">
									<img class="box_right_a_img" src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png?thumb=1&w=200&h=200&f=webp&q=90"
									 alt="">
									<div class="box_right_a_deta">
										<h3 class="box_right_atitle">title</h3>
										<p class="box_right_content">box_right_content</p>
										<p class="box_right_price">
											<span class="box_right_new_price">1999</span><span class="box_right_old_price">2999</span>
										</p>
									</div>
								</a>
							</li>
							<li class="box_right_li">
								<a href="#" class="box_right_a clearfix">
									<img class="box_right_a_img" src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png?thumb=1&w=200&h=200&f=webp&q=90"
									 alt="">
									<div class="box_right_a_deta">
										<h3 class="box_right_atitle">title</h3>
										<p class="box_right_content">box_right_content</p>
										<p class="box_right_price">
											<span class="box_right_new_price">1999</span><span class="box_right_old_price">2999</span>
										</p>
									</div>
								</a>
							</li>
		
							<!-- 商品 小个的 -->
							<li class=" main_right_li_items">
								<a href="#" class="main_right_li_items_a clearfix">
									<div class="items_left">
										<h3 class="items_title">Redmi显示器23.8英寸</h3>
										<p class="item_price">
											<span class="normal_price">599</span>
										</p>
									</div>
									<div class="items_right">
										<img class="items_right_img" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7c37478d8b3b553ba0a50adaec2fc775.png?thumb=1&w=125&h=125&f=webp&q=90">
									</div>
								</a>
							</li>
							<!-- 浏览更多 单页ul 看情况 添加一个 -->
							<li class=" main_right_li_items_bottom">
								<a href="#" class="main_right_li_items_bottom_a clearfix">
									<div class="items_left_bottom">
										<h3 class="items_title_bottom">浏览更多</h3>
										<p class="item_content_bottom">热门</p>
									</div>
									<div class="items_right_bottom">
										<img class="items_right_img_bottom" src="../images/arrowright.svg">
									</div>
								</a>
							</li>
						</ul>
					</div>
				</div>
				<!-- 右边结束 -->
		
			</div>
			<!-- 两个元素的块 end-->
		</div>
	</body>
</html>


<script src="js/商品组合块.js" type="text/javascript" charset="utf-8"></script>
